<!DOCTYPE html>
<html ng-app="mymodule">
<head>
	<title></title>
	<script type="text/javascript" src="angular.src.js"></script>
	<script type="text/javascript" src="angular-router.src.js"></script>
	<script type="text/javascript">
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>
</head>
<body>
<div ng-controller="MyController">
	
	{{testname}}

	<ul>
            <li><a href="a">click a</a></li>
            <li><a href="b">click b</a></li>
        </ul>


    		<div ng-view ></div>

</div>

<script type="text/javascript">
	var module2 = angular.module("mymodule2",[]).config(function($controllerProvider){
		
	});

	

	var module = angular.module("mymodule",["mymodule2","ngRoute"]).config(function($controllerProvider){
		console.log($controllerProvider);
	}).config(function($routeProvider, $locationProvider) {
          $routeProvider
           .when('/a', {
            templateUrl: 'css/auto.html',
            controller: 'MyController2'
          })
        .when('/b', {
            templateUrl: 'css/flex.html',
            controller: 'MyController3'
        });

        $locationProvider.html5Mode(true);
        
    });

	module.controller("MyController",function($injector,$controller,$scope){
		$scope.testname="1111";
		this.test="dddddd";

	})

	module.controller("MyController2",function($injector,$controller,$scope){
		$scope.testname="2222";

		$scope.$on("$viewContentLoaded",function(){
            console.log("ng-view content loaded!");
        });

        $scope.$on("$routeChangeStart",function(event,next,current){
            //event.preventDefault(); //cancel url change
            console.log("route change start!");
        });

	})

	module.controller("MyController3",function($injector,$controller,$scope){
		$scope.testname="33333";

	})

	module2.controller("MyController",function($controller,$scope){
		$scope.testname="2---111111";

	})

	angular.bootstrap()
</script>
</body>
</html>